<x-app-layout>
     <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('create blog') }}
        </h2>
    </x-slot>
    <form method="POST" action="{{ route('blogs.store') }}" class="bg-white p-6 rounded-lg" enctype="multipart/form-data">
        @csrf
        <h2 class="text-lg mb-4">Create a new blog post</h2>
        <div class="mb-4">
            <label for="title" class="block text-gray-700 font-medium mb-2">Title</label>
            <input id="title" type="text" class="border border-gray-400 p-2 w-full" name="title" value="{{ old('title') }}" required autofocus>
        </div>

        <div class="mb-4">
            <label for="featured_image">Featured Image</label>
            <input type="file" name="featured_image" id="featured_image" class="border border-gray-400 p-2 w-full">
        </div>

        <div class="mb-4">
            <label for="body" class="block text-gray-700 font-medium mb-2">Content</label>
            <textarea id="body" class="border border-gray-400 p-2 w-full h-32" name="body" required>{{ old('body') }}</textarea>
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 font-medium mb-2" for="tags">
                Tags
            </label>
            <input
                type="text"
                name="tags"
                id="tags"
                class="form-input bg-gray-200 rounded-md py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:bg-white"
            >
        </div>

        <div class="mb-4">
            <label for="category" class="block text-gray-700 font-medium mb-2">Category</label>
            <select id="category" class="border border-gray-400 p-2 w-full" name="category" required>
                @foreach($categories as $category)
                    <option value="{{$category->id}}">{{$category->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="mb-4">
            <button type="submit" class="bg-indigo-500 text-gray-700 border border-gray-300 py-2 px-4 rounded-lg hover:bg-indigo-600">Create</button>
        </div>
        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-4">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </form>
</x-app-layout>
